import React , {useState , useRef} from 'react';
import { addBanner } from "../../api/banner"
import './add.css'
import { Input , Button , Space ,  Image} from "antd"
import {useHistory} from "react-router-dom"
const Com = () => {
  const linkRef = useRef()
  const altRef = useRef()
  const fileRef = useRef()
  const imgRef = useRef()
  const [url , setUrl] = useState('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F062021132H5%2F210620132H5-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649398454&t=32051085778a6706324c83aff0971e3d')
  const history = useHistory()

  const getFileInfo = ( ) => {
    // console.log(fileRef.current.input.files)  //Input组件这是 需要获取到真正的底层input
    const file = fileRef.current.input.files[0]
    const reader = new FileReader(file)
    reader.readAsDataURL(file)
    reader.onload = function () {
      setUrl(this.result)
      imgRef.current.value = this.result
    }
   

  }
  const uploadBanner = ( ) => {
    const obj = {
      link:linkRef.current.input.value,
      alt:altRef.current.input.value,
      img:url,
    }
    addBanner(obj).then(res => {
      console.log(res);
      history.push('/banner/list')
    })
  }

    return (
      <Space direction='vertical' style={{ width: '100%' }} >
        <Input ref={ linkRef } placeholder="请输入图片的链接地址" />
        <Input ref={ altRef } placeholder="请输入图片的提示信息" />
        <Input ref={ fileRef } type='file' onChange = { getFileInfo }  />
        <Input ref={ imgRef } value = { url } placeholder="图片地址"/>
        <Button type="primary" onClick = { uploadBanner } >上传轮播图</Button>
        <Image src={ url} />

      </Space>
    );

}

export default Com